<template>
	<view class="child caseListModule">
		<view class="topstyle">
			<text class="total">共上传{{list.total}}个案例</text>
			<text class="slectsd sebefore" v-show="stylechoice"  :class="{'slectsdon':showstyle}"  @click="showstyle = !showstyle">{{styletext}}</text>
		</view>
		<view class="all_type_body" :class="{'openHei' : showstyle}" v-show="showstyle">
			<view class="type_body">
				<view class="type_item" v-for="(item, index) in listyle" :class="{'active': isactive == index}" :key="item.id"
                    @click="choose(index)">{{ item.style_name }}</view>
			</view>
		</view>
		<view class="caselist">
			<view class="item" v-for="(item, index) in list.data" :key="index">
				<image class="case_imgs" :src="`${item.image_url}?x-oss-process=image/resize,m_fill,h_480,w_1065`" @click="casedetail(item.case_relevance_id,item.case_id)"></image>
				<view class="introduce">
					<view class="lititle">{{item.case_name}}</view>
					<view class="homemsg">
						<text>{{item.acreage}}</text>
						<text class="separate_line" v-if="item.room && item.acreage">|</text>
						<text>{{item.room}}</text>
						<text class="separate_line" v-if="item.room && item.acreage && item.case_style_name">|</text>
						<text>{{item.case_style_name}}</text>
						<text class="separate_line" v-if="item.room && item.acreage && item.case_style_name &&  item.price">|</text>
						<!-- <text>{{item.price}}</text>
						<text class="singOn-tag">报名最高可省￥{{ item.gift_price ? (item.gift_price / 10000).toFixed(1) : 2.3 }}万</text> -->
					</view>
				<!-- 	<view class="looks">
						<view class="looks_box">
							<view class="opt_item eye_wrap">
								<text>{{item.view_num}}</text>
							</view>
							<view class="opt_item share_wrap">
                            <view class="iconfont iconfenxiang"/>
								<text>{{item.share_num}}</text>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="omisspage" v-show="mispage">
			<view class="img_wrap">

			</view>
			<!-- <image :src="`${constant.imgUrl}design/defupage.png`"></image> -->
			<view>你还没有案例，快去添加吧~</view>
			<view>添加案例</view>
		</view>
	</view>
</template>

<script>

import { list } from '@/mixins'
import { getstyle, getcastlist } from '@/api/case'
import { mapState } from 'vuex'

export default {
	name: 'CaseList',
	mixins: [list],
	props: {
		ownerUserId: [String, Number],
		shareUserId: [String, Number]
	},
	data() {
		return {
			isactive: 0,
			listyle: [],
			case_style: '',
			showstyle: false, // 下拉风格的展示状态
			styletext: '全部风格',
			stylechoice: true, // 下拉风格点击按钮的状态
			mispage: false, // 缺省页显示状态
			constant: this.$constant
		}
	},
	computed: {
		...mapState({
			role_id: state => state.user.basicUser.role_id
		})
	},
	methods: {
		init() {
			this.getcasestyle()
			this.resetList()
			this.getloadcase()
		},
		choose(index) {
			// 风格选择
			this.isactive = index
			this.showstyle = !this.showstyle
			this.styletext = this.listyle[index].style_name
			this.case_style = this.listyle[index].style_id
			this.resetList()
			this.getloadcase()
		},
		getcasestyle() {
			// 风格类型获取
			getstyle({ owner_user_id: this.ownerUserId }).then(res => {
				this.listyle = res.data.style_list || []
			})
		},
		refresh() {
			// 下拉刷新
			this.resetList()
			this.getloadcase(true) // 加载数据
		},
		reachBottom() {
			if (this.list.finished) {
				uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
				return
			}
			if (this.list.loading) {
				return
			}
			this.getloadcase()
		},
		getloadcase(refresh = false) {
			// 案例列表信息
			const data = {
				owner_user_id: this.ownerUserId,
				case_style: this.case_style,
				limit: this.list.limit,
				page: this.list.page
			}
			getcastlist(data).then((res) => {
				this.completes(res)
				refresh && this.$emit('stopRefresh')
			})
		},
		casedetail(casedetail, case_id) {
			// 到案例详情
			let localserid = uni.getStorageSync('user_id')
			let userid = this.ownerUserId
			let share_id = ''
			let parent_id = ''
			if (userid == localserid) {
				share_id = this.ownerUserId
				parent_id = ''
			} else {
				share_id = localserid
				parent_id = this.shareUserId
			}
			const params = {
				owner_user_id: userid,
				active: 0,
				gobackt: 'normal',
				caseid: casedetail,
				mainId: case_id,
				share_user_id: this.shareUserId
			}
			const p_id = this.$parent.option.p_share_user_id
			if (p_id) {
				params.p_share_user_id = p_id
			}
			// console.log(this.$parent.option.p_share_user_id, 'this.$parent.option.p_share_user_id')
			// p_share_user_id: this.$parent.option.p_share_user_id

			// uni.navigateTo({
			// 	url: `/pages/case/casedetail${this.commonJS.queryData(params)}`
			// })
			const startUrl = `${this.$constant.formal}/hkds/#/`
			const role_type = this.role_id == 1 || this.role_id == 1 ? 'company' : 'person'
			const returnUrl = encodeURIComponent(startUrl + role_type + '/case/detail' + this.commonJS.queryData(params))
			uni.navigateTo({
				url: `/pages/page/webview/index?returnUrl=${returnUrl}`
			})
		}
	}

}
</script>

<style scoped lang="scss">
.child {
    width: 100%;
    height: auto;
    margin-top: 20px;
    // margin-bottom: 80px;
    padding-bottom: 100px;
}

.looks {
    height: 35px;
    width: auto;
    display: block;
    line-height: 35px;
    margin-top: 10px;
}

.looks .looks_box {
    color: #999999;
    line-height: 35px;
    margin-top: 13px;
    display: flex;
    .opt_item {
        margin-right: 30px;
        display: flex;
        align-items: center;
    }
    .eye_wrap {
        margin-right: 40px;
        background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/design/look.png");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 35px 35px;
    }
    .fabulous_wrap {
        padding-left: 38px;
        background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/design/fabulous.png");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 35px 35px;
    }
    .share_wrap {
        text {
            padding-left: 12px;
        }
    }
}
.iconfenxiang {
    font-size: 16px;
}
.omisspage {
    width: 366px;
    height: auto;
    margin-top: 72px;
    margin-left: 180px;
    text-align: center;
    margin-bottom: 20px;
}
.omisspage .img_wrap {
    width: 366px;
    height: 120px;
    background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/design/defupage.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.omisspage image {
    width: 366px;
    height: 120px;
    margin-bottom: 30px;
}

.omisspage view {
    font-size: 26px;
    color: rgb(102, 102, 102);
    margin-top: 29px;
}

.omisspage navigator {
    width: 240px;
    height: 70px;
    font-size: 30px;
    border-radius: 35px;
    background: rgb(255, 209, 26);
    line-height: 70px;
    text-align: center;
    margin-left: 60px;
    margin-top: 15px;
}

.looks .looks_box .eye {
    width: 35px;
    height: 35px;
    margin-right: 5px;
}

.looks .looks_box .fabulous {
    width: 35px;
    height: 35px;
    margin-right: 5px;
}

.homemsg {
    color: #999999;
    margin-top: 10px;
    margin-left: 20px;
    font-size: 24px;
    line-height: 38px !important;
}

.introduce {
    width: 100%;
    height: auto;
    padding-bottom: 5px;
}

.introduce view {
    line-height: 1;
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 20px;
}

.introduce .lititle {
    font-size:28px;
    font-weight: bold;
    margin-left:30px;
    margin-bottom: 20px;
    width: 100%;
}

.caselist {
    width:100%;
    height: auto;
    background-color:#f5f5f5;
    border-bottom:40px solid #f5f5f5;
}

.caselist .item {
    height: auto;
    margin: 0 20px 20px;
    background-color: #fff;
    border-top:20px solid #f5f5f5;
    // border-bottom:20px solid #f5f5f5;
    border-radius: 20px;
}

.caselist .item .case_imgs {
    height: 484px;
}

.sebefore {
    background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/design/down.png");
}

.child .topstyle {
    color: #999999;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    width: 90%;
    margin-left: 5%;
    font-size: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.child .topstyle .slectsd {
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 30px;
}
  .singOn-tag {
    color: #fff;
    padding: 2px 10px 4px;
    border-radius: 6px;
    background: linear-gradient(to right, #ff1c31, #f424de);
    position: relative;
    margin-left: 20px;
  }
  // .triangle {
  .singOn-tag::before {
    position: absolute;
    left: -10px;
    top: 10px;
    bottom: 10px;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-width: 10px 15px 10px 0;
    border-style: solid;
    border-color: transparent #ff1c31 transparent transparent; /*透明 灰 透明 透明 */
    // margin: 40px auto;
  }

.caseListModule {
    position: relative;
    .all_type_body {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        // height: 440px;
        height: 0;
        overflow-y: auto;
        box-shadow: 0 2px 8px #ddd;
        background-color: #fff;
        z-index: 1;
        .type_body {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 30px 15px;
            .type_item {
                width: calc(33.33% - 36px);
                height: 70px;
                line-height: 68px;
                text-align: center;
                border-radius: 50px;
                border: 1px solid #ddd; /*no*/
                margin: 0 15px 30px;
            }
            .type_item.active {
                background-color: #ffd11a;
                border: none;
            }
        }
    }

    .openHei {
        animation: maxHeight 0.3s;
        -webkit-animation: maxHeight 0.3s; /* Safari 与 Chrome */
        animation-fill-mode: forwards;
    }

    @keyframes maxHeight {
        from {height: 0;}
        to {height: 440px;}
    }

    @-webkit-keyframes maxHeight {
        from {height: 0;}
        to {height: 440px;}
    }
}
</style>
